<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="我的购物车"
      left-text=""
      left-arrow
      fixed
      @click-left="onClickLeft"
    >
    </van-nav-bar>

    <!-- 购物车列表 -->
    <div class="shoppingcard">
      <div>
        <van-swipe-cell>
          <div class="card">
            <van-checkbox v-model="checked"></van-checkbox>
            <van-card
              style="vertical-align: middle;"
              price="31.50"
              desc="描述信息"
              title="商品标题"
              class="goods-card"
            >
              <template #thumb>
                <img
                  style="width:80px; "
                  src="../assets/swipe/shop01.jpg"
                  alt=""
                />
              </template>
              <template #footer>
                <van-stepper v-model="value" />
              </template>
            </van-card>
          </div>

          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="Dialog"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      value: 1,
      checked: false,
    };
  },
  methods: {
    Dialog() {
      Dialog.confirm({
        title: "",
        message: "确认要删除这件商品吗？",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {},
    // onClickEditAddress(){},
  },
};
</script>
<style scoped lang="scss">
.card {
  display: flex;
  justify-content: center;
}
.shoppingcard {
  margin-top: 46px;
}
.goods-card {
  margin: 0;
  width: 90%;
  display: flex;
  padding: 5px;

  background-color: white;
}
.van-stepper {
  margin-left: 70px;
  margin-top: 60px;
}

.delete-button {
  height: 100%;
}
</style>
